<template>
  <div class="forgetPwd">
    <header>
      <div>
        <!-- <img :src="lyybg" alt="lyybg" /> -->
        <span class="orgName">
          {{ sysConfig.systemName }}
        </span>
      </div>
      <div @click="backLogin" style="cursor:pointer">返回登录</div>
    </header>
    <main>
      <div>
        <img :src="zhmm" alt="zhmm" style="width:100%" />
      </div>
      <div class="container">
        <!-- 手机号 -->
        <el-row class="formItem">
          <el-col :span="3" class="icon">
            <i class="el-icon-mobile"> </i>
          </el-col>
          <el-col :span="21">
            <input
              required
              v-model="form.mobile"
              placeholder="请输入账号/手机号"
            />
          </el-col>
        </el-row>
        <!-- 图片验证码 -->
        <el-row class="formItem">
          <el-col :span="3" class="icon">
            <i class="el-icon-money"> </i>
          </el-col>
          <el-col :span="15">
            <input v-model="form.verifyCode" placeholder="请输入图片验证码" />
          </el-col>
          <el-col :span="6" style="padding-top:8px">
            <span
              @click="changeImgCode"
              style="display: inline-block;height: 37px;border: 1px solid #D7D7D7;margin-left: 3px;"
            >
              <img
                :src="imgCode"
                style="width: 100%;height: 100%;cursor: pointer;"
              />
            </span>
          </el-col>
        </el-row>
        <!-- 短信验证码 -->
        <el-row class="formItem">
          <el-col :span="3" class="icon">
            <i class="el-icon-message"> </i>
          </el-col>
          <el-col :span="15">
            <input v-model="form.messageCode" placeholder="短信验证码" />
          </el-col>
          <el-col :span="6" style="padding-top:10px">
            <el-button
              type="primary"
              style="width:100%;padding:12px 8px"
              :disabled="isDis"
              @click="getMessageCode"
              :class="isDis ? 'sleep' : ''"
            >
              {{ isDis ? "重新发送" : "发送验证码" }}
              <span v-if="isDis">({{ sec }}s)</span>
            </el-button>
          </el-col>
        </el-row>
        <!-- 新密码 -->
        <el-row class="formItem">
          <el-col :span="3" class="icon">
            <i class="el-icon-lock"> </i>
          </el-col>
          <el-col :span="21">
            <input
              v-model="form.password"
              type="password"
              placeholder="请设置新密码"
            />
          </el-col>
        </el-row>
        <!-- 重复密码 -->
        <el-row class="formItem">
          <el-col :span="3" class="icon">
            <i class="el-icon-lock"> </i>
          </el-col>
          <el-col :span="21">
            <input
              v-model="form.password2"
              type="password"
              placeholder="请重复密码"
            />
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <el-row :gutter="28">
          <el-col :span="16">
            <el-button
              type="primary"
              style="width:100%;border:none"
              @click="confirm"
              >确定</el-button
            >
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary"
              style="width:100%;background-color:#F5F5F5FF;color:#999999FF;border:none"
              @click="resetData"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!-- ICP备案号 -->
      <footer>
        <a
          href="https://beian.miit.gov.cn/#/Integrated/index"
          target="_blank"
          style="margin-right:10px;text-decoration: none;"
        >
          ICP备案号{{ sysConfig.internetContentProvider }}
        </a>
        <span
          v-if="sysConfig.technicalServicePersonnelInfoRetry"
          style="white-space: pre;"
        >
          {{ sysConfig.technicalServicePersonnelInfo }}
        </span>
      </footer>
    </main>
  </div>
</template>

<script>
import lyybg from "@/assets/lyybg_logo_slices/lyybg_logo.png";
import zhmm from "@/assets/zhmm_bg_slices/zhmm_bg.png";
export default {
  name: "forgetPassword",
  data() {
    return {
      lyybg,
      zhmm,
      isDis: false,
      sec: 60,
      imgCode: window.api.codeUrl,
      sysConfig: {},
      form: {
        mobile: "",
        verifyCode: "",
        messageCode: "",
        password: "",
        password2: ""
      }
    };
  },
  created() {
    let config = JSON.parse(sessionStorage.getItem("systemConfig"));
    this.sysConfig = config;
  },
  methods: {
    backLogin() {
      this.$router.push({ name: "login" });
    },
    timerSec() {
      let id = setInterval(() => {
        this.sec -= 1;
        if (this.sec == 0) {
          this.isDis = false;
          this.sec = 60;
          clearInterval(id);
        }
      }, 1000);
    },
    changeImgCode() {
      let num = Math.ceil(Math.random() * 10); //生成一个随机数（防止缓存）
      this.imgCode = window.api.codeUrl + "?" + num;
    },
    getMessageCode() {
      if (!this.form.mobile) {
        return this.warning("请输入手机号");
      }
      if (!this.form.verifyCode) {
        return this.warning("请输入图片验证码");
      }
      this.API.findPasswordVerify({
        mobile: this.form.mobile,
        code: this.form.verifyCode
      })
        .then(ret => {
          this.success("发送成功");
          this.isDis = true;
          this.form.verifyCode = "";
          this.timerSec();
          this.changeImgCode();
        })
        .catch(err => {
          this.changeImgCode();
        });
    },
    confirm() {
      if (!this.form.mobile) {
        return this.warning("请输入手机号");
      }
      if (!this.form.messageCode) {
        return this.warning("请输入验证码");
      }
      if (!this.form.password) {
        return this.warning("请输入密码");
      }
      if (!this.form.password2) {
        return this.warning("请重复密码");
      }
      if (this.form.password === this.form.password2) {
        if (this.form.password.length < 6) {
          return this.warning("密码过于简单，请重新设置");
        }
        this.API.verifyPassword({
          mobile: this.form.mobile,
          code: this.form.messageCode
        }).then(ret => {
          console.log(ret);
          if (ret.data) {
            this.API.settingPassword({
              mobile: this.form.mobile,
              password: this.form.password
            }).then(ret => {
              console.log(ret);
              let { value } = ret.data;
              if (value == "操作成功") {
                this.success("密码重置成功");
                this.resetData();
              }
            });
          } else {
            this.warning("验证码不正确");
          }
        });
      } else {
        this.warning("两次输入密码不一致");
      }
    },
    resetData() {
      this.form = {
        mobile: "",
        verifyCode: "",
        messageCode: "",
        password: "",
        password2: ""
      };
    }
  }
};
</script>

<style scoped>
.forgetPwd {
  color: #999999ff;
}
a {
  color: #999999ff;
}
.orgName {
  font-size: 26px;
  line-height: 72px;
  font-weight: bold;
  color: #df413d;
}
header {
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 0 360px;
}
main {
  background: #f8f8f8;
}
footer {
  margin: 80px 0 20px;
  text-align: center;
}
.container {
  margin: 0 auto;
  width: 600px;
  height: 568px;
  background: #ffffff;
  position: relative;
  transform: translate(0, -5%);
  padding: 0 80px;
  box-sizing: border-box;
  box-shadow: 0 10px 25px #e6e6e6;
}
.container::before {
  content: "";
  display: table;
}

.formItem {
  width: 100%;
  height: 60px;
  margin: 28px 0;
  border-bottom: 1px solid #e0e0e0ff;
}
.formItem .icon {
  line-height: 60px;
  text-align: center;
  font-size: 24px;
}
.formItem input {
  width: 100%;
  height: 58px;
  padding: 0;
  border: none;
  outline: none;
}
.sleep {
  background-color: #f5f5f5ff;
  color: #999999ff;
  border: 1px solid #f5f5f5ff;
}
input::-webkit-input-placeholder {
  /*WebKit browsers*/
  color: #999999ff;
}

input::-moz-input-placeholder {
  /*Mozilla Firefox*/
  color: #999999ff;
}

input::-ms-input-placeholder {
  /*Internet Explorer*/
  color: #999999ff;
}
</style>
